<template>
  <div class="Seats">
    <div class="Seats-head">
      <div class="Seats-head-td">
        <div class="sit bg-sit"></div>
        <div>可选座位</div>
      </div>
      <div class="Seats-head-td">
        <div class="sit bg-sited"></div>
        <div>已售座位</div>
      </div>
      <div class="Seats-head-td">
        <div class="sit bg-temp"></div>
        <div>已选座位</div>
      </div>
    </div>

    <div class="screen-container"></div>

    <div class="screen-title">银幕中央</div>

    <div
      v-for="(item, i) in list"
      class="row"
      style="margin-left: 15%;"
      :key="i"
    >
      <div class="sit bg-nosit" style="margin-right:50px">
        {{ i + 1 }}
      </div>
      <div
        @click="selectSeat(item1, i, j)"
        :class="[
          'sit',
          { 'bg-temp': item1 == 3 },
          { 'bg-sited': item1 == 2 },
          { 'bg-sit': item1 == 1 },
          { 'bg-nosit': item1 == 0 },
        ]"
        v-for="(item1, j) in item"
        :key="j"
      ></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.Seats-head {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0;
  .Seats-head-td {
    display: flex;
    align-items: center;
    margin: 0 10px;
    div {
      font-size: 14px;
    }
  }
}
/* 屏幕 */
.screen-container {
  width: 100%;
  height: 40px;
  background: url("/img/screen.png");
  background-position: center center;
  background-repeat: no-repeat;
}
.screen-title {
  text-align: center;
  font-size: 16px;
  color: #666;
  margin: 20px;
}

.row {
  display: flex;
  align-items: center;
}
/* 可选座位 */
.bg-sit {
  background-image: url("/img/bg-sit.png");
}

/* 已售座位 */
.bg-sited {
  /* background-color: red; */
  background-image: url("/img/bg-sited.png");
}

/* 已选座位 */
.bg-temp {
  background-image: url("/img/bg-temp.png");
}
.sit {
  height: 30px;
  width: 30px;
  min-height: 10px;
  min-width: 10px;
  margin: 4px 4px 4px 4px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  /* border: 1px solid black; */
}

.bg-sit:hover {
  cursor: pointer;
}

/* 空位置 */
.bg-nosit {
  text-align: center;
  line-height: 30px;
}

/* 已选座位号 */
.select-sit {
  border: 2px orange solid;
  border-radius: 10px;
  margin-left: 10px;
  padding: 4px 10px 4px 10px;
  background-color: rgba(255, 0, 0, 0.2);
}
</style>

<script setup>
import { ref, onMounted,inject } from 'vue';
import bus from '../../../bus/index'
import {useRoute}  from "vue-router";
import {getSeats} from '../api/index.js'
// 座位状态数组
const list = ref([
  [1, 1, 2, 2, 1, 0, 1, 2, 1, 1],
  [1, 1, 2, 2, 1, 2, 1, 2, 1, 0],
  [1, 1, 2, 2, 1, 0, 1, 2, 1, 1],
  [1, 1, 2, 0, 1, 0, 1, 2, 1, 1],
  [0, 1, 2, 2, 1, 0, 1, 2, 1, 2],
  [0, 1, 2, 2, 1, 0, 1, 2, 1, 0],
  [0, 1, 2, 2, 1, 2, 1, 2, 1, 1],
  [1, 1, 2, 2, 1, 2, 1, 2, 1, 0],
  [1, 1, 2, 2, 1, 1, 1, 2, 1, 0],
  [1, 1, 2, 2, 1, 1, 1, 2, 1, 0],
]);

// 已选座位数
const seatCount = ref(0);
const { changeTotalPrice } = inject('changeTotalPrice');
// 选座时触发
const selectSeat = (data, x, y) => {
  if (data === 1 && seatCount.value < 6) {
    list.value[x][y] = 3;
    seatCount.value++;
    changeTotalPrice(seatCount.value)
  } else if (data === 3) {
    list.value[x][y] = 1;
    seatCount.value--;
    changeTotalPrice(seatCount.value)
  } else {
    if (seatCount.value === 6) {
      alert('最多六张票');
    }
  }
};

// 获取座位列表
const getSeatList = async (id) => {
  const response = await getSeats(id);
  list.value = JSON.parse(response.seatData);
};

// 获取路由参数并加载座位信息
const route = useRoute();
onMounted(() => {
  const salaTimeId = route.params.salaTimeId;
  if (salaTimeId) {
    getSeatList(salaTimeId);
  }

  bus.on('deltags', (x, y) => {
    selectSeat(3, x, y);
  });
});
</script>

